import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { findValueByKey } from 'utils'
import { Button, Popconfirm, Row, Col } from 'antd'
import { List, Page } from 'components'
import queryString from 'query-string'
import Modal from './Modal'
import { ListMenuType } from 'utils/enums'
import styles from '../../themes/global.less'
import fieldMapping from '../../utils/fieldMapping.js'

const AddressData = ({ location, dispatch, addressData, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination, currentItem, modalVisible, modalType, selectedRowKeys, addressType, countryCodeData, contractTypeData, parentId } = addressData

  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: 800,
    optionData: { countryCodeData, contractTypeData },
    confirmLoading: loading.effects['addressData/update'],
    title: `${modalType === 'create' ? 'Create' : 'Update'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      if (addressType === 'entityAddress') {
        data.entityId = parentId
      } else {
        data.personId = parentId
      }
      dispatch({
        type: `addressData/${modalType}`,
        payload: {
          data: data,
        },
      })
    },
    onCancel () {
      dispatch({
        type: 'addressData/hideModal',
      })
    },
  }

  const listProps = {
    dataSource: list,
    menuType: ListMenuType.MENU_UPDATE + ListMenuType.MENU_DELETE,
    loading: loading.effects['addressData/list'],
    location,
    columnsData: [
      {
        title: 'Type',
        dataIndex: 'addressType',
        key: 'addressType',
        render: (record) => {
          const data = findValueByKey(contractTypeData, record, 'code')
          return data
        },
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: 'Country',
        dataIndex: 'countryCode',
        key: 'countryCode',
        render: (record) => {
          const data = findValueByKey(countryCodeData, record, 'code')
          return data
        },
      },
      {
        title: 'Zip',
        dataIndex: 'zip',
        key: 'zip',
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onDeleteItem (id) {
      const deleteData = {
        id: id,
        type: addressType,
      }
      if (addressType === 'entityPhone') {
        deleteData.entityId = parentId
      } else {
        deleteData.personId = parentId
      }
      dispatch({
        type: 'addressData/delete',
        payload: deleteData,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'addressData/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
          type: addressType,
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'addressData/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }

  const onAdd = () => {
    dispatch({
      type: 'addressData/showModal',
      payload: {
        modalType: 'create',
        currentItem: {},
        type: addressType,
      },
    })
  }

  return (
    <Page inner>
      <Row style={{ marginBottom: 10 }} type="flex" justify="end">
        <Col>
          <Button size="large" type="ghost" onClick={onAdd}>Create</Button>
        </Col>
      </Row>
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

AddressData.propTypes = {
  addressData: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ addressData, loading }) => ({ addressData, loading }))(AddressData)
